<template>
  <div class="register-container">
    <!-- 左侧轮播图（与登录页复用） -->
    <div class="banner-section">
      <el-carousel height="100vh" indicator-position="none" arrow="never">
        <el-carousel-item v-for="item in 3" :key="item">
          <div class="carousel-item">
            <img :src="getBgImage(item)" alt="轮播图" />
            <h2 class="slogan">连接田间与餐桌</h2>
            <p class="sub-slogan">每一口都是自然的馈赠</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 右侧注册表单 -->
    <div class="form-section">
      <div class="form-wrapper">
        <div class="header">
          <img
            src="https://cdn-icons-png.flaticon.com/128/10130/10130599.png"
            class="logo"
            alt="助农平台"
          />
          <h3 class="title">新用户注册</h3>
          <el-divider class="divider" />
        </div>

        <el-form
          :model="registerForm"
          :rules="registerRules"
          ref="registerFormRef"
          label-position="top"
          @keyup.enter="handleRegister"
        >
          <!-- 用户角色选择 -->
          <el-form-item label="选择身份" prop="role">
            <el-radio-group v-model="registerForm.role">
              <el-radio-button label="1">
                <el-icon class="role-icon">
                  <User />
                </el-icon>
                <span>普通用户</span>
              </el-radio-button>
              <el-radio-button label="2">
                <el-icon class="role-icon">
                  <Avatar />
                </el-icon>
                <span>农户</span>
              </el-radio-button>
            </el-radio-group>
          </el-form-item>

          <!-- 账户信息 -->
          <el-form-item prop="username">
            <el-input
              v-model="registerForm.username"
              placeholder="4-16位字母/数字组合"
              prefix-icon="User"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="registerForm.password"
              type="password"
              placeholder="8-20位包含大小写"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input
              v-model="registerForm.confirmPassword"
              type="password"
              placeholder="请再次输入密码"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>
          <el-form-item prop="email">
            <el-input
              v-model="registerForm.email"
              placeholder="请输入邮箱"
              prefix-icon="Message"
            />
          </el-form-item>
          <el-form-item prop="phone">
            <el-input
              v-model="registerForm.phone"
              placeholder="请输入手机号"
              prefix-icon="Iphone"
            >
              <template #prepend>+86</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="register-btn"
              :loading="loading"
              @click="handleRegister"
            >
              立即注册
            </el-button>
          </el-form-item>

          <div class="login-link">
            已有账号？
            <el-link type="primary" @click="goLogin">去登录</el-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { User, Avatar } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { UserControllerService } from "@/generated";

const registerFormRef = ref();
const loading = ref(false);
const router = useRouter();

const registerForm = reactive({
  role: "1",
  phone: "",
  email: "",
  username: "",
  password: "",
  confirmPassword: "",
});

// 验证规则
const validatePassword = (rule, value, callback) => {
  if (value !== registerForm.password) {
    callback(new Error("两次输入密码不一致"));
  } else {
    callback();
  }
};

const registerRules = reactive({
  role: [{ required: true, message: "请选择用户类型", trigger: "change" }],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "邮箱格式不正确", trigger: "blur" },
  ],
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 4, max: 16, message: "长度在4到16个字符", trigger: "blur" },
    {
      pattern: /^[a-zA-Z0-9_]+$/,
      message: "只能包含字母、数字和下划线",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 8, max: 20, message: "长度在8到20个字符", trigger: "blur" },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z]).+$/,
      message: "必须包含大小写字母",
      trigger: "blur",
    },
  ],
  confirmPassword: [
    { required: true, message: "请确认密码", trigger: "blur" },
    { validator: validatePassword, trigger: "blur" },
  ],
});

// 直接返回外部 URL
const getBgImage = (index) => {
  return [
    "http://152.136.39.163:9000/images-dev/upload/images/d8613e7f-9832-424f-92cb-22faf1a5896c.jpg",
    "https://images.unsplash.com/photo-1597362925123-77861d3fbac7?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.pexels.com/photos/1482101/pexels-photo-1482101.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  ][index - 1];
};

const handleRegister = async () => {
  console.log("handleRegister", registerForm);
  try {
    await registerFormRef.value.validate();
    loading.value = true;
    // 调用注册接口
    // await registerAPI(registerForm)
    const res = await UserControllerService.userRegister(registerForm);
    if (res.code === 0) {
      // 注册成功
      // 跳转到登录页
      goLogin();
      ElMessage.success("注册成功！");
    } else {
      ElMessage.error(res.message || "注册失败，请检查账号和密码！");
    }
  } catch (error) {
    console.error("注册失败:", error);
  } finally {
    loading.value = false;
  }
};

const goLogin = () => {
  // 跳转登录逻辑]
  router.push("/common/login");
};
</script>

<style lang="scss" scoped>
.register-container {
  display: flex;
  height: 100vh;

  .banner-section {
    flex: 1;
    background: linear-gradient(135deg, #3b873e 0%, #2c662f 100%);

    .carousel-item {
      height: 100%;
      background-size: cover;
      background-position: center;
      position: relative;

      .slogan {
        position: absolute;
        top: 20%;
        left: 10%;
        color: white;
        font-size: 36px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }

      .sub-slogan {
        position: absolute;
        top: calc(20% + 60px);
        left: 10%;
        color: rgba(255, 255, 255, 0.9);
        font-size: 18px;
      }
    }
  }

  .form-section {
    width: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;

    .form-wrapper {
      width: 320px;

      .logo {
        text-align: center;
        margin-bottom: 40px;

        img {
          height: 60px;
        }
      }

      .captcha-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;

        .captcha-image {
          height: 40px;
          cursor: pointer;
          border: 1px solid #ddd;
          border-radius: 4px;
          transition: opacity 0.3s;

          &:hover {
            opacity: 0.8;
          }
        }
      }

      .login-btn {
        width: 100%;
        background: #3b873e;
        border-color: #3b873e;

        &:hover {
          background: #2c662f;
          border-color: #2c662f;
        }
      }

      .form-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
      }

      .social-login {
        margin-top: 40px;

        .divider {
          display: flex;
          align-items: center;
          color: #999;
          margin: 20px 0;

          .line {
            flex: 1;
            height: 1px;
            background: #eee;
          }

          .text {
            padding: 0 12px;
            font-size: 12px;
          }
        }

        .social-icons {
          text-align: center;

          .wechat-icon {
            font-size: 32px;
            color: #09bb07;
            cursor: pointer;
            transition: transform 0.3s;

            &:hover {
              transform: scale(1.1);
            }
          }
        }
      }
    }
  }

  .form-section {
    .header {
      text-align: center;
      margin-bottom: 30px;

      .logo {
        height: 60px;
        margin-bottom: 15px;
      }

      .title {
        color: #3b873e;
        margin: 10px 0;
        font-size: 24px;
      }

      .divider {
        margin: 15px 0;
        border-color: #e8e8e8;
      }
    }

    .role-icon {
      vertical-align: middle;
      margin-right: 8px;
      font-size: 18px;
    }

    .el-radio-button {
      margin: 0 10px;

      :deep(.el-radio-button__inner) {
        padding: 15px 20px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;

        &:hover {
          color: #3b873e;
        }
      }

      &.is-active :deep(.el-radio-button__inner) {
        background: #3b873e;
        border-color: #3b873e;
        box-shadow: none;
      }
    }

    .register-btn {
      width: 100%;
      background: #3b873e;
      border-color: #3b873e;
      padding: 12px 20px;
      font-size: 16px;

      &:hover {
        background: #2c662f;
        border-color: #2c662f;
      }
    }

    .login-link {
      text-align: center;
      margin-top: 20px;
      color: #666;

      .el-link {
        vertical-align: baseline;
      }
    }
  }
}

@media (max-width: 768px) {
  .el-col {
    width: 100%;
    margin-bottom: 15px;
  }
}
</style>
